<template>
  <el-card>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/stuWelcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>英语版块</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/englishList' }">英语角</el-breadcrumb-item>
    </el-breadcrumb>
    <!--    标题-->
    <div class="light">
      <h3>青蛙王子2</h3>
    </div>
    <div class="content">
      <p>One day, while the princess was playing with her gold ball it fell into the well. Because the well was so dark, the gold ball couldn't be seen. So, the princess sat down with a thud and began to cry. Just then, the ugly frog appeared.</p>
      <p>有一天，公主玩金球时，不小心将球掉进了井里。因为井太黑了，什么也看不到。公主“砰”的一声坐在地上哭了起来。就在这时，丑陋的青蛙出现了。</p>
      <p>"Why are you crying, princess?" "My gold ball fell into your well." "I will get your gold ball, if you let me stay and live by your side?" Even though she did not like the ugly frog, she wanted her gold ball back.</p>
      <p>“你为什么哭呢，公主？”“我的金球掉进了那口井里了。”“如果让我留在你身边的话，我会帮你把金球捞上来？”即使她讨厌这只丑陋的青蛙，她还是想要捡回金球。</p>
      <p>With the help of the frog, the princess was able to get her ball back. "Princess, let me live with you." "Hyump! An ugly frog like you, I don't even want to see you." "But, you promised me." Still the frog kept following the princess.</p>
      <p>在青蛙的帮助下，公主这才把球拿了回来。“公主，让我跟你一起生活吧。”“哎呦！你这只丑陋的青蛙，我不想看到你。”“但是你之前答应我了啊。”青蛙紧紧地跟着公主身后。</p>
      <p>When the princess was having her meal the frog ate beside her. Even when she tucked herself in bed the frog slept beside her. However, the princess disliked living with the ugly frog.</p>
      <p>当公主吃饭时，青蛙就坐在她旁边吃。甚至当她把自己捂进被子里时，青蛙就一动不动地睡在她身旁。但是，公主还是讨厌跟丑陋的青蛙生活在一起。</p>
      <p>Several days later, the princess became so angry that she threw the ugly frog on the ground. However, instead of the ugly frog a handsome prince was standing before her. "My savior, would you marry me?" The most beautiful princess was able to marry the most handsome prince.</p>
      <p>几天过后，公主很生气地把那只丑陋的青蛙扔在地上。就在这时，一位英俊的王子却站在她面前。“我的救命恩人，你愿意嫁给我吗？”于是，美丽的公主嫁给了英俊的王子。</p>
    </div>
    <div class="light">
      <el-button type="primary" style="margin-top: 20px;" @click="complete">完成阅读</el-button>
    </div>
  </el-card>
</template>

<script>
  export default {
    methods:{
      complete(){
        this.$message({
          message:'恭喜您已完成本篇阅读！',
          type:"success"
        });
        // 跳转至EnglishList页面
        this.$router.replace("/englishList");
      }
    }
  }
</script>
<style scoped>
  .light{
    font-size: 30px;
    text-align: center;
    color: #fefefe;
    text-shadow: 0 0 0.5em #0ae642, 0 0 0.2em #5c5c5c;
    -webkit-animation: shine 2.4s infinite;/*设置动画*/
  }
  @-webkit-keyframes shine{/*创建动画*/
    0%,100%{ color:#fff;text-shadow:0 0 10px #f0d1f8,0 0 10px #0000FF; }
    50%{ text-shadow:0 0 10px #0000FF,0 0 40px #0ae642; }
  }
  .content{
    min-height:350px;
    overflow-y:auto;
    max-height:600px;
  }
  p{
    font-size: 18px;
    color: #fefefe;
    text-shadow:0px 1px 0px #d27878,
    0px 2px 0px #b0b0b0,
    0px 3px 0px #a0a0a0,
    0px 4px 0px #909090,
    0px 5px 10px rgba(0, 0, 0, .9);
  }
</style>
